import React, { useRef } from 'react';
import { Text, Box, Cylinder, Sphere, Plane, RoundedBox, Cone } from '@react-three/drei';
import * as THREE from 'three';

interface UltraParkEnvironmentProps {
  radius?: number;
}

export const UltraParkEnvironment: React.FC<UltraParkEnvironmentProps> = ({ 
  radius = 20 
}) => {
  const envRef = useRef<THREE.Group>(null);
  const GROUND_LEVEL = 0;

  // 自然环境材质系统
  const materials = {
    grass: { color: '#228B22', roughness: 0.9, metalness: 0.0 },
    dirt: { color: '#8B4513', roughness: 0.95, metalness: 0.0 },
    stone: { color: '#708090', roughness: 0.8, metalness: 0.1 },
    wood: { color: '#8B4513', roughness: 0.85, metalness: 0.0 },
    water: { color: '#4682B4', roughness: 0.1, metalness: 0.3 },
    leaves: { color: '#228B22', roughness: 0.8, metalness: 0.0 },
    bark: { color: '#654321', roughness: 0.9, metalness: 0.0 },
    flowers: { color: '#FF69B4', roughness: 0.6, metalness: 0.0 },
    metal: { color: '#2F4F4F', roughness: 0.3, metalness: 0.8 }
  };

  return (
    <group ref={envRef}>
      {/* ========== 自然地形系统 ========== */}
      
      {/* 主草地 */}
      <Plane 
        args={[radius * 2.5, radius * 2.5]} 
        rotation={[-Math.PI / 2, 0, 0]}
        position={[0, GROUND_LEVEL, 0]}
        receiveShadow
      >
        <meshStandardMaterial {...materials.grass} />
      </Plane>

      {/* 草地纹理细节 */}
      {Array.from({ length: 50 }, (_, i) => {
        const x = (Math.random() - 0.5) * radius * 2;
        const z = (Math.random() - 0.5) * radius * 2;
        return (
          <Cylinder
            key={i}
            position={[x, GROUND_LEVEL + 0.001, z]}
            args={[0.02, 0.02, 0.05 + Math.random() * 0.1]}
            castShadow
          >
            <meshStandardMaterial 
              color={Math.random() > 0.5 ? '#32CD32' : '#228B22'} 
              roughness={0.9} 
            />
          </Cylinder>
        );
      })}

      {/* 蜿蜒小径系统 */}
      {Array.from({ length: 30 }, (_, i) => {
        const t = i / 29;
        const angle = t * Math.PI * 4;
        const r = 3 + Math.sin(t * Math.PI * 2) * 2;
        const x = Math.cos(angle) * r;
        const z = Math.sin(angle) * r;
        
        return (
          <Cylinder
            key={`path-${i}`}
            position={[x, GROUND_LEVEL + 0.005, z]}
            args={[0.8, 0.8, 0.02]}
            rotation={[0, angle, 0]}
            receiveShadow
          >
            <meshStandardMaterial {...materials.stone} />
          </Cylinder>
        );
      })}

      {/* 小径边缘装饰石 */}
      {Array.from({ length: 60 }, (_, i) => {
        const t = i / 59;
        const angle = t * Math.PI * 4;
        const r = 3.8 + Math.sin(t * Math.PI * 2) * 2;
        const x = Math.cos(angle) * r + (Math.random() - 0.5) * 0.3;
        const z = Math.sin(angle) * r + (Math.random() - 0.5) * 0.3;
        
        return (
          <RoundedBox
            key={`path-stone-${i}`}
            position={[x, GROUND_LEVEL + 0.02, z]}
            args={[0.1 + Math.random() * 0.05, 0.04, 0.08 + Math.random() * 0.04]}
            radius={0.01}
            castShadow
          >
            <meshStandardMaterial {...materials.stone} />
          </RoundedBox>
        );
      })}

      {/* ========== 精美湖泊系统 ========== */}
      
      <group position={[8, GROUND_LEVEL, -8]}>
        {/* 主湖面 */}
        <Cylinder args={[6, 6, 0.05]} receiveShadow>
          <meshStandardMaterial 
            {...materials.water} 
            transparent 
            opacity={0.8}
          />
        </Cylinder>
        
        {/* 湖底 */}
        <Cylinder position={[0, -0.1, 0]} args={[6.2, 6.2, 0.1]} receiveShadow>
          <meshStandardMaterial color="#4682B4" roughness={0.9} />
        </Cylinder>
        
        {/* 湖岸石头装饰 */}
        {Array.from({ length: 20 }, (_, i) => {
          const angle = (i * Math.PI * 2) / 20;
          const r = 6.3 + Math.random() * 0.5;
          const x = Math.cos(angle) * r;
          const z = Math.sin(angle) * r;
          
          return (
            <RoundedBox
              key={i}
              position={[x, 0.05, z]}
              args={[0.3 + Math.random() * 0.2, 0.1 + Math.random() * 0.1, 0.2 + Math.random() * 0.2]}
              radius={0.02}
              castShadow
              receiveShadow
            >
              <meshStandardMaterial {...materials.stone} />
            </RoundedBox>
          );
        })}
        
        {/* 喷泉中心 */}
        <group position={[0, 0.2, 0]}>
          <Cylinder args={[0.5, 0.5, 0.3]} castShadow>
            <meshStandardMaterial {...materials.stone} />
          </Cylinder>
          
          {/* 喷水效果 */}
          {Array.from({ length: 12 }, (_, i) => (
            <Sphere
              key={i}
              position={[
                (Math.random() - 0.5) * 0.8,
                0.4 + Math.random() * 0.6,
                (Math.random() - 0.5) * 0.8
              ]}
              args={[0.02 + Math.random() * 0.01]}
            >
              <meshStandardMaterial 
                color="#87CEEB" 
                transparent 
                opacity={0.6}
              />
            </Sphere>
          ))}
        </group>
      </group>

      {/* ========== 古典凉亭系统 ========== */}
      
      <group position={[-10, GROUND_LEVEL, 10]}>
        {/* 凉亭基座 */}
        <Cylinder args={[4, 4, 0.2]} castShadow receiveShadow>
          <meshStandardMaterial {...materials.stone} />
        </Cylinder>
        
        {/* 八根支柱 */}
        {Array.from({ length: 8 }, (_, i) => {
          const angle = (i * Math.PI * 2) / 8;
          const x = Math.cos(angle) * 3;
          const z = Math.sin(angle) * 3;
          
          return (
            <group key={i}>
              <Cylinder
                position={[x, 1.8, z]}
                args={[0.15, 0.15, 3.6]}
                castShadow
              >
                <meshStandardMaterial {...materials.wood} />
              </Cylinder>
              
              {/* 柱子装饰雕刻 */}
              {Array.from({ length: 6 }, (_, j) => (
                <Cylinder
                  key={j}
                  position={[x, 0.6 + j * 0.5, z]}
                  args={[0.18, 0.18, 0.08]}
                  castShadow
                >
                  <meshStandardMaterial color="#8B4513" roughness={0.7} />
                </Cylinder>
              ))}
            </group>
          );
        })}
        
        {/* 凉亭屋顶 */}
        <Cone position={[0, 4.2, 0]} args={[5, 1.5, 8]} castShadow>
          <meshStandardMaterial color="#8B0000" roughness={0.8} />
        </Cone>
        
        {/* 屋檐装饰 */}
        <Cylinder position={[0, 3.8, 0]} args={[4.8, 4.8, 0.15]} castShadow>
          <meshStandardMaterial {...materials.wood} />
        </Cylinder>
        
        {/* 凉亭内部圆桌 */}
        <Cylinder position={[0, 0.5, 0]} args={[1.2, 1.2, 0.08]} castShadow receiveShadow>
          <meshStandardMaterial {...materials.stone} />
        </Cylinder>
        
        {/* 桌腿 */}
        <Cylinder position={[0, 0.25, 0]} args={[0.08, 0.08, 0.5]} castShadow>
          <meshStandardMaterial {...materials.stone} />
        </Cylinder>
        
        {/* 环绕石凳 */}
        {Array.from({ length: 6 }, (_, i) => {
          const angle = (i * Math.PI * 2) / 6;
          const x = Math.cos(angle) * 2.2;
          const z = Math.sin(angle) * 2.2;
          
          return (
            <Cylinder
              key={i}
              position={[x, 0.25, z]}
              args={[0.3, 0.3, 0.5]}
              castShadow
              receiveShadow
            >
              <meshStandardMaterial {...materials.stone} />
            </Cylinder>
          );
        })}
      </group>

      {/* ========== 豪华树木森林系统 ========== */}
      
      {/* 大型主树 */}
      {[
        { pos: [15, 0, 15], scale: 1.5 },
        { pos: [-15, 0, -15], scale: 1.3 },
        { pos: [12, 0, -18], scale: 1.4 },
        { pos: [-18, 0, 12], scale: 1.2 }
      ].map((tree, treeIndex) => (
        <group key={`main-tree-${treeIndex}`} position={tree.pos}>
          {/* 主树干 */}
          <Cylinder
            position={[0, 3 * tree.scale, 0]}
            args={[0.4 * tree.scale, 0.6 * tree.scale, 6 * tree.scale]}
            castShadow
          >
            <meshStandardMaterial {...materials.bark} />
          </Cylinder>
          
          {/* 树干纹理 */}
          {Array.from({ length: 8 }, (_, i) => (
            <Box
              key={i}
              position={[
                0.35 * tree.scale * Math.cos(i),
                1 + i * 0.5 * tree.scale,
                0.35 * tree.scale * Math.sin(i)
              ]}
              args={[0.1, 0.3, 0.05]}
              rotation={[0, i, 0]}
              castShadow
            >
              <meshStandardMaterial color="#4A4A4A" roughness={0.95} />
            </Box>
          ))}
          
          {/* 主树冠 */}
          <Sphere
            position={[0, 6 * tree.scale, 0]}
            args={[3 * tree.scale, 16, 16]}
            castShadow
          >
            <meshStandardMaterial {...materials.leaves} />
          </Sphere>
          
          {/* 分层树冠 */}
          {Array.from({ length: 3 }, (_, layer) => (
            <Sphere
              key={layer}
              position={[
                (Math.random() - 0.5) * 2 * tree.scale,
                5.5 + layer * 0.8 * tree.scale,
                (Math.random() - 0.5) * 2 * tree.scale
              ]}
              args={[2.2 * tree.scale, 12, 12]}
              castShadow
            >
              <meshStandardMaterial 
                color={layer % 2 === 0 ? '#228B22' : '#32CD32'} 
                roughness={0.8} 
              />
            </Sphere>
          ))}
          
          {/* 树枝系统 */}
          {Array.from({ length: 12 }, (_, branch) => {
            const angle = (branch * Math.PI * 2) / 12;
            const branchLength = (0.8 + Math.random() * 0.6) * tree.scale;
            return (
              <Cylinder
                key={branch}
                position={[
                  Math.cos(angle) * branchLength * 0.7,
                  4 + Math.random() * 2 * tree.scale,
                  Math.sin(angle) * branchLength * 0.7
                ]}
                args={[0.05, 0.08, branchLength]}
                rotation={[Math.random() * 0.5, angle, Math.random() * 0.3]}
                castShadow
              >
                <meshStandardMaterial {...materials.bark} />
              </Cylinder>
            );
          })}
        </group>
      ))}

      {/* 中等树木填充 */}
      {Array.from({ length: 15 }, (_, i) => {
        const angle = (i * Math.PI * 2) / 15;
        const r = 12 + Math.random() * 6;
        const x = Math.cos(angle) * r;
        const z = Math.sin(angle) * r;
        const scale = 0.6 + Math.random() * 0.4;
        
        return (
          <group key={`medium-tree-${i}`} position={[x, 0, z]}>
            <Cylinder
              position={[0, 2 * scale, 0]}
              args={[0.25 * scale, 0.35 * scale, 4 * scale]}
              castShadow
            >
              <meshStandardMaterial {...materials.bark} />
            </Cylinder>
            
            <Sphere
              position={[0, 4 * scale, 0]}
              args={[2 * scale, 12, 12]}
              castShadow
            >
              <meshStandardMaterial color="#228B22" roughness={0.8} />
            </Sphere>
          </group>
        );
      })}

      {/* ========== 精美花园系统 ========== */}
      
      {/* 花床 */}
      {[
        { center: [5, 0, 8], radius: 3 },
        { center: [-8, 0, 5], radius: 2.5 },
        { center: [0, 0, -12], radius: 4 },
        { center: [12, 0, 0], radius: 2.8 }
      ].map((bed, bedIndex) => (
        <group key={`flower-bed-${bedIndex}`}>
          {/* 花床边缘 */}
          <Cylinder
            position={bed.center}
            args={[bed.radius, bed.radius, 0.15]}
            receiveShadow
          >
            <meshStandardMaterial {...materials.dirt} />
          </Cylinder>
          
          {/* 花床围边 */}
          {Array.from({ length: Math.floor(bed.radius * 8) }, (_, i) => {
            const angle = (i * Math.PI * 2) / Math.floor(bed.radius * 8);
            const x = bed.center[0] + Math.cos(angle) * bed.radius;
            const z = bed.center[2] + Math.sin(angle) * bed.radius;
            
            return (
              <RoundedBox
                key={i}
                position={[x, 0.08, z]}
                args={[0.15, 0.16, 0.1]}
                radius={0.02}
                castShadow
              >
                <meshStandardMaterial color="#8B4513" roughness={0.8} />
              </RoundedBox>
            );
          })}
          
          {/* 花朵 */}
          {Array.from({ length: Math.floor(bed.radius * 12) }, (_, i) => {
            const angle = Math.random() * Math.PI * 2;
            const r = Math.random() * (bed.radius - 0.5);
            const x = bed.center[0] + Math.cos(angle) * r;
            const z = bed.center[2] + Math.sin(angle) * r;
            const flowerColors = ['#FF1493', '#FF69B4', '#FFB6C1', '#FFA500', '#FFFF00', '#FF6347'];
            
            return (
              <group key={i}>
                {/* 花茎 */}
                <Cylinder
                  position={[x, 0.15, z]}
                  args={[0.008, 0.008, 0.3]}
                  castShadow
                >
                  <meshStandardMaterial color="#228B22" />
                </Cylinder>
                
                {/* 花朵 */}
                <Sphere
                  position={[x, 0.32, z]}
                  args={[0.04 + Math.random() * 0.02]}
                  castShadow
                >
                  <meshStandardMaterial 
                    color={flowerColors[Math.floor(Math.random() * flowerColors.length)]}
                    roughness={0.6}
                  />
                </Sphere>
                
                {/* 花瓣 */}
                {Array.from({ length: 5 }, (_, petal) => {
                  const petalAngle = (petal * Math.PI * 2) / 5;
                  return (
                    <Sphere
                      key={petal}
                      position={[
                        x + Math.cos(petalAngle) * 0.06,
                        0.32,
                        z + Math.sin(petalAngle) * 0.06
                      ]}
                      args={[0.02]}
                      castShadow
                    >
                      <meshStandardMaterial 
                        color={flowerColors[Math.floor(Math.random() * flowerColors.length)]}
                        roughness={0.5}
                      />
                    </Sphere>
                  );
                })}
              </group>
            );
          })}
        </group>
      ))}

      {/* ========== 公园设施系统 ========== */}
      
      {/* 古典长椅 */}
      {[
        { pos: [6, 0, -6], rot: Math.PI / 4 },
        { pos: [-6, 0, 6], rot: -Math.PI / 4 },
        { pos: [10, 0, 2], rot: Math.PI / 2 },
        { pos: [-2, 0, -10], rot: 0 },
        { pos: [0, 0, 8], rot: Math.PI }
      ].map((bench, i) => (
        <group key={`bench-${i}`} position={bench.pos} rotation={[0, bench.rot, 0]}>
          {/* 长椅座面 */}
          <RoundedBox
            position={[0, 0.25, 0]}
            args={[1.8, 0.08, 0.5]}
            radius={0.02}
            castShadow
            receiveShadow
          >
            <meshStandardMaterial {...materials.wood} />
          </RoundedBox>
          
          {/* 长椅靠背 */}
          <RoundedBox
            position={[0, 0.6, -0.2]}
            args={[1.8, 0.7, 0.08]}
            radius={0.02}
            castShadow
          >
            <meshStandardMaterial {...materials.wood} />
          </RoundedBox>
          
          {/* 长椅腿 */}
          {[[-0.7, 0.125, -0.15], [0.7, 0.125, -0.15], [-0.7, 0.125, 0.15], [0.7, 0.125, 0.15]].map((legPos, legIndex) => (
            <RoundedBox
              key={legIndex}
              position={legPos}
              args={[0.08, 0.25, 0.08]}
              radius={0.01}
              castShadow
            >
              <meshStandardMaterial {...materials.wood} />
            </RoundedBox>
          ))}
          
          {/* 装饰铁艺 */}
          <Cylinder
            position={[0, 0.45, -0.16]}
            args={[0.8, 0.8, 0.02]}
            rotation={[Math.PI/2, 0, 0]}
            castShadow
          >
            <meshStandardMaterial {...materials.metal} />
          </Cylinder>
        </group>
      ))}

      {/* 优雅路灯系统 */}
      {[
        [8, 0, 8], [-8, 0, -8], [15, 0, 0], [-15, 0, 0],
        [0, 0, 15], [0, 0, -15], [10, 0, -10], [-10, 0, 10]
      ].map((pos, i) => (
        <group key={`lamp-${i}`} position={pos}>
          {/* 灯柱 */}
          <Cylinder
            position={[0, 2, 0]}
            args={[0.08, 0.08, 4]}
            castShadow
          >
            <meshStandardMaterial {...materials.metal} />
          </Cylinder>
          
          {/* 灯柱底座 */}
          <Cylinder
            position={[0, 0.15, 0]}
            args={[0.2, 0.2, 0.3]}
            castShadow
          >
            <meshStandardMaterial {...materials.stone} />
          </Cylinder>
          
          {/* 灯头 */}
          <Sphere
            position={[0, 4.2, 0]}
            args={[0.3]}
            castShadow
          >
            <meshStandardMaterial 
              color="#F0F0F0" 
              transparent 
              opacity={0.8}
              emissive="#FFFACD"
              emissiveIntensity={0.3}
            />
          </Sphere>
          
          {/* 装饰灯罩 */}
          <Cylinder
            position={[0, 4.4, 0]}
            args={[0.35, 0.25, 0.2]}
            castShadow
          >
            <meshStandardMaterial {...materials.metal} />
          </Cylinder>
          
          {/* 光源 */}
          <pointLight
            position={[0, 4.2, 0]}
            intensity={1}
            distance={15}
            color="#FFFACD"
            castShadow
          />
        </group>
      ))}

      {/* ========== 野生动物装饰 ========== */}
      
      {/* 小鸟群 */}
      {Array.from({ length: 8 }, (_, i) => {
        const x = (Math.random() - 0.5) * 30;
        const y = 8 + Math.random() * 5;
        const z = (Math.random() - 0.5) * 30;
        
        return (
          <group key={`bird-${i}`} position={[x, y, z]}>
            {/* 鸟身 */}
            <Sphere args={[0.05, 8, 8]} castShadow>
              <meshStandardMaterial color="#8B4513" />
            </Sphere>
            
            {/* 翅膀 */}
            <Box position={[-0.04, 0, 0]} args={[0.06, 0.02, 0.08]} rotation={[0, 0, 0.3]} castShadow>
              <meshStandardMaterial color="#654321" />
            </Box>
            <Box position={[0.04, 0, 0]} args={[0.06, 0.02, 0.08]} rotation={[0, 0, -0.3]} castShadow>
              <meshStandardMaterial color="#654321" />
            </Box>
          </group>
        );
      })}

      {/* 蝴蝶群 */}
      {Array.from({ length: 12 }, (_, i) => {
        const x = (Math.random() - 0.5) * 25;
        const y = 1 + Math.random() * 3;
        const z = (Math.random() - 0.5) * 25;
        const colors = ['#FF69B4', '#FFB6C1', '#FFA500', '#FFFF00'];
        
        return (
          <group key={`butterfly-${i}`} position={[x, y, z]}>
            {/* 蝴蝶身体 */}
            <Cylinder args={[0.005, 0.005, 0.06]} castShadow>
              <meshStandardMaterial color="#000000" />
            </Cylinder>
            
            {/* 翅膀 */}
            {[[-0.03, 0.01], [0.03, 0.01], [-0.025, -0.01], [0.025, -0.01]].map((wingPos, wingIndex) => (
              <Sphere
                key={wingIndex}
                position={[wingPos[0], wingPos[1], 0]}
                args={[0.015, 8, 8]}
                castShadow
              >
                <meshStandardMaterial 
                  color={colors[Math.floor(Math.random() * colors.length)]}
                  transparent
                  opacity={0.8}
                />
              </Sphere>
            ))}
          </group>
        );
      })}

      {/* ========== 专业照明系统 ========== */}
      
      {/* 自然环境光 */}
      <ambientLight intensity={0.6} color="#FFE4B5" />
      
      {/* 主阳光 */}
      <directionalLight 
        position={[20, 25, 15]} 
        intensity={1.5} 
        color="#FFFACD"
        castShadow
        shadow-mapSize={[2048, 2048]}
        shadow-camera-far={60}
        shadow-camera-left={-30}
        shadow-camera-right={30}
        shadow-camera-top={30}
        shadow-camera-bottom={-30}
      />
      
      {/* 补充光源 */}
      <pointLight 
        position={[-20, 15, -20]} 
        intensity={0.8} 
        distance={30}
        color="#E6E6FA"
      />
      
      <pointLight 
        position={[20, 15, 20]} 
        intensity={0.8} 
        distance={30}
        color="#F0E68C"
      />
      
      {/* 边界检测 - 无形墙壁 */}
      <Sphere args={[radius + 2]} position={[0, 0, 0]}>
        <meshBasicMaterial 
          transparent 
          opacity={0}
          side={THREE.BackSide}
        />
      </Sphere>
    </group>
  );
};